<template>
    <!-- 廉江HIS病历 -->
    <section v-if="cfg.visible">
        <!-- 病历弹框 -->
        <the-dialog :cfg="cfg" width="80%" :need-footer="false" :loading="caseLoading" :need-close-modal="false">
            <div class="case__list" slot="body">
                <div class="case__search">
                    <div class="search__item">
                        <el-date-picker class="item__inp" type="daterange" v-model="caseDate" size="mini" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间" value-format="yyyy-MM-dd" unlink-panels clearable></el-date-picker>
                    </div>
                    <div class="search__btn">
                        <el-button class="o-btn" size="mini" type="primary" @click="getList">搜索</el-button>
                    </div>
                </div>
                <el-table ref="theTable" class="x-table" size="medium" :data="caseLists" v-loading="caseLoading" height="65vh" highlight-current-row>
                    <el-table-column type="index" label="序号" width="55" align="center">
                        <template slot-scope="scope">
                            {{scope.$index + (casePager.current - 1) * casePager.size + 1}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="clinicSeq" label="流水号">
                        <template slot-scope="scope">
                            <span>{{scope.row.clinicSeq || '-'}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="deptName" label="科室">
                        <template slot-scope="scope">
                            <span>{{scope.row.deptName || '-'}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="doctorName" label="医生">
                        <template slot-scope="scope">
                            <span>{{scope.row.doctorName || '-'}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="clinicDate" label="咨询时间">
                        <template slot-scope="scope">
                            <span>{{scope.row.clinicDate || '-'}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="diagnosis" label="诊断">
                        <template slot-scope="scope">
                            <span>{{scope.row.diagnosis || '-'}} </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-link class="o-link o-link--primary is-block" :underline="false" @click="openDetailDialog(scope.row)">查看详情</el-link>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination class="x-pager" @current-change="onChangePager" :current-page="casePager.current" :page-size="casePager.size" layout="prev, pager, next, total" :total="casePager.total">
                </el-pagination>
            </div>
        </the-dialog>


        <!-- 病历详情 -->
        <the-dialog :cfg="detailCfg" width="80%" :need-footer="false" :loading="detailLoading">
            <div class="case__detail" slot="body">
                <!-- 患者数据 -->
                <div class="x-description x-description--flex is-col-3 s-label--md has-divider">
                    <div :class="['x-description__row', {'is-full': o.isFull}, {'is-flex-2': o.isClear}]" v-for="(o,i) in detailFields" :key="i">
                        <div class="row__label">{{o.label}}：</div>
                        <div class="row__value">
                            <template v-if="o.key == 'patientName'">
                                <span>{{ detailInfo[o.key] }}</span>
                                <span v-if="detailInfo.idCardNo">（{{`${detailInfo.patientSex}，${detailInfo.patientAge}岁`}}）</span>
                            </template>
                            <template v-else>{{ detailInfo[o.key] || '暂无' }}</template>
                        </div>
                    </div>
                </div>

                <!-- 病历数据 -->
                <div v-for="(oItem, oIdx) in inquiryInfo" :key="oIdx" class="x-description x-description--flex is-col-3 s-label--md" :class="{'has-divider': oIdx != inquiryInfo.length-1}">
                    <div :class="['x-description__row', {'is-full': o.isFull}, {'is-flex-2': o.isClear}]" v-for="(o,i) in inquiryFields" :key="i">
                        <div class="row__label row__label--light">{{o.label}}：</div>
                        <div class="row__value">
                            <!-- 病历类型 -->
                            <template v-if="o.key == 'medicalType'">
                                {{ $util.filterByIds(oItem[o.key], $dict.medicalTypeIds) }}
                            </template>
                            <!-- 血压 -->
                            <template v-else-if="o.key == 'bloodPressure'">
                                <span v-show="oItem.bloodPressureMax">{{ oItem.bloodPressureMax }}</span>
                                /
                                <span v-show="oItem.bloodPressureMin">{{ oItem.bloodPressureMin }}</span>
                            </template>

                            <!-- 身高/体重 -->
                            <template v-else-if="o.key == 'weight'">
                                <span v-show="oItem.height">{{ oItem.height }}cm</span>
                                /
                                <span v-show="oItem.weight">{{ oItem.weight }}kg</span>
                            </template>

                            <template v-else-if="o.key == 'prescriptionInfo'">
                                <template v-if="oItem.prescriptionInfo && oItem.prescriptionInfo.length > 0">
                                    <el-tag v-for="(c, cIdx) in oItem.prescriptionInfo" :key="cIdx" class="item__tag" type="primary" effect="plain" disable-transitions size="small" @click="showPdfDialog(c, 6)">
                                        {{ c.prescriptionId }}
                                    </el-tag>
                                </template>
                                <p v-else>暂无</p>
                            </template>

                            <template v-else>{{ oItem[o.key] || '暂无' }}</template>

                            <!-- 图片列表（可预览大图） -->
                            <!--  <template v-else-if="o.isImg">
                                    <div v-if="oItem[o.key] && oItem[o.key].length > 0" class="item__imglist">
                                        <the-image-viewer v-for="(c, cIdx) in oItem[o.key]" :key="cIdx" class="imglist__col" :url="c.src" width="40px" height="40px"></the-image-viewer>
                                    </div>
                                    <p v-else>暂无</p>
                                </template> -->
                        </div>
                    </div>
                </div>
            </div>
        </the-dialog>

        <pdf-dialog ref="pdfDialog"></pdf-dialog>
    </section>
</template>

<script>
    import pdfDialog from '@/components/chatroom/view-pdf';
    export default {
        components: {
            pdfDialog
        },
        data() {
            return {
                cfg: {
                    visible: false,
                    title: '查看病历'
                },

                patientId: '',
                patientInfo: {},

                caseDate: '', // 病历时间段
                caseLoading: false,
                caseLists: [],
                casePager: {
                    ...this.$global.pager
                },

                detailCfg: {
                    visible: false,
                    title: '病历详情'
                },
                detailLoading: false,
                detailId: '',
                detailInfo: {},
                inquiryInfo: [],
                detailFields: [
                    { key: 'clinicSeq', label: '编号', isFull: true },
                    { key: 'patientName', label: '就诊人' },
                    { key: 'idCardNo', label: '身份证' },
                    { key: 'patientGuardianName', label: '监护人' },
                    { key: 'deptName', label: '问诊科室' },
                    { key: 'doctorName', label: '问诊医生' },
                    { key: 'createDate', label: '问诊时间' },
                ], // 问诊记录字段
                inquiryFields: [
                    { key: 'medicalType', label: '病历类型' },
                    { key: 'diagnosis', label: '诊断' },
                    // { key: 'pastHistory', label: '既往史' },
                    { key: 'chiefComplaint', label: '主诉' },
                    // { key: 'historyOfPresentIllness', label: '现病史' },
                    { key: 'historyOfPresentIllness', label: '病史' },
                    { key: 'allergiesHistory', label: '过敏史' },
                    { key: 'personalHistory', label: '个人史' },
                    { key: 'preventiveinoHistory', label: '预防接种史', isClear: true },
                    { key: 'temperature', label: '体温（℃）' },
                    { key: 'breathRate', label: '呼吸（次/分）' },
                    { key: 'heartRate', label: '脉搏（次/分）' },
                    { key: 'bloodPressure', label: '血压（mmHg）' },
                    { key: 'weight', label: '身高（cm) / 体重（kg）' },
                    { key: 'bmi', label: 'BMI 指数' },
                    { key: 'physicalExamination', label: '体格检查', isFull: true },
                    { key: 'assistantExamination', label: '辅助检查', isFull: true },
                    { key: 'doctorAdvice', label: '诊疗意见', isFull: true },
                    { key: 'prescriptionInfo', label: '处方', isFull: true, isTag: true },
                ]
            }
        },
        methods: {
            onOpen(data = {}) {
                this.cfg.visible = true;
                this.cfg.title = `${data.patientName || '患者'}的病历`

                this.patientId = data.patientId || '';
                this.patientInfo = { ...data };

                this.getList();
            },
            // 获取病历列表
            getList() {
                this.caseLoading = true;

                let params = {
                    cardType: '03',
                    healthCardNo: this.patientInfo.healthCardNo,
                    patientId: this.patientId,
                    current: this.casePager.current,
                    size: this.casePager.size,

                    // healthCardNo: 900663823,
                    // patientId: "DAF479145F2126E6E050A8C0010004EA"
                };

                if (this.caseDate) {
                    params.beginDate = this.caseDate[0] || '';
                    params.endDate = this.caseDate[1] || '';
                }

                this.$ajax.getCaseHistoryListByLj(params).then(res => {
                    this.caseLoading = false;

                    this.caseLists = res.data && res.data.clinicHistory || [];
                    this.casePager.total = res.data && res.data.count || 0;

                }).catch(err => {
                    this.caseLoading = false;
                    err.msg && this.$util.message(err.msg);
                })
            },
            onChangePager(value) {
                this.casePager.current = value;
                // this.casePager.size = options.size;

                this.getList();
            },
            openDetailDialog(row) {
                this.detailCfg.visible = true;
                this.detailCfg.title = `${this.patientInfo.patientName || '患者'}的病历`;

                this.detailId = row.clinicSeq;

                this.getDetail();
            },
            getDetail() {
                this.detailLoading = true;

                let params = {
                    clinicSeq: this.detailId,
                    hisMedicalId: this.detailId
                };


                this.$ajax.getCaseHistoryDetailByLj(params).then(res => {
                    this.detailLoading = false;

                    this.detailInfo = res.data || {};
                    this.inquiryInfo = this.detailInfo.medicalInfo || []
                }).catch(err => {
                    this.detailLoading = false;
                    err.msg && this.$util.message(err.msg);
                })
            },
            // 查看处方
            showPdfDialog(row, key) {
                let params = {
                    id: key == 1 ? row.logId : row.prescriptionId,
                    resource: key
                };

                if (row.templateValue) params.template = row.templateValue;

                /* {
                    'inquiryLogPrescription': 4, // '电子处方'
                    'applicationForm': 5, // '检查检验申请单'
                    'inspectionOpinion': 3, // '报告意见单'
                    'healthGuidance': 2, // '健康指导'
                    'hospitalization': 1, // '住院申请书'
                    'his': 6, // his处方查看
                } [key]; */

                this.$refs.pdfDialog && this.$refs.pdfDialog.onOpen(params);
            },
        },
    }
</script>

<style lang="scss" scoped>
    .case__search {
        @include flex;
        margin: 0 0 12px;

        .search__item {
            @include flex-1;

            .item__inp {
                margin: 0 6px 6px 0;
            }
        }


        .search__btn {
            text-align: right;

            .o-btn {
                margin: 0 0 6px 6px;
            }
        }
    }


    .case__detail {
        min-height: 30vh;

        .detail__item {
            &.is-cover {

                /* 首页封面 */
                .x-description__row {
                    margin-bottom: 24px;
                    line-height: 36px;

                    .row__label {
                        padding: 0 12px 0 24px;
                    }

                    .row__value .value__inner {
                        padding-bottom: 9px;
                    }
                }
            }
        }

        .item__head {
            @include flex;
            @include flex-col-c;
            @include flex-row-between;

            margin: 0 24px 24px 44px;
            font-size: 14px;
            font-weight: 400;

            .head__tip {
                color: $--tips-color;
                font-size: 14px;
                font-weight: 400;
            }

            .head__title {
                margin: 0 0 12px;
                color: $--main-color;
                font-size: 18px;
                font-weight: 600;
            }
        }

        .item__title {
            margin: 0 0 12px;
            color: $--main-color;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }

        .item__logo {
            display: block;
            width: 70px;
            margin: 24px auto;
            text-align: center;
        }

        .item__tips {
            margin: 12px 0 0;
            color: $--light-color;
            font-size: 12px;
            text-align: center;
        }

        .item__tag {
            margin: 2px 6px 2px 0;
            cursor: pointer;
        }

        .item__imglist {
            font-size: 0;
            white-space: nowrap;
            overflow-x: auto;

            .imglist__col {
                display: inline-block;
                margin-right: 6px;
            }
        }

    }
</style>